import React, { useState, useRef, createContext } from 'react';

import { Button, Layout, theme, Space } from 'antd';
const { Header, Content } = Layout;
// 引入组件
import AiWorkflow from '../components/Flow';
import BaseInfo from './BaseInfo';
import './global.less';


export default ({ setCurrentContent }) => {

  const aiWorkflowRef = useRef<any>(); // TODO: Replace 'any' with actual component type
  const baseInfoRef = useRef<any>();

  // 使用状态来追踪当前活动的Tab
  const [activeTab, setActiveTab] = useState(1);

  // 切换Tab的事件处理函数
  const handleTabClick = (tabNumber: any) => {
    setActiveTab(tabNumber);
  };

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  // 保存智能体
  const handleCallChildMethod = () => {
    console.log(aiWorkflowRef)
    if (aiWorkflowRef.current) {
      // 调用子组件保存编排信息
      aiWorkflowRef.current?.saveModel();
    }
    if (baseInfoRef.current) {
      // 保存基本信息
      baseInfoRef.current?.saveModel();
    }
  };

  return (
    <div>
      {/* 智能体设计 */}
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
            display: 'flex',
            justifyContent: 'center',
          }}
        >
          <div
            style={{
              backgroundColor: '#dfe0e3',
              width: '220px',
              marginTop: '10px',
              marginLeft: '170px',
              height: '40px',
              lineHeight: '40px',
              borderRadius: '50px',
              display: 'flex',
              alignItems: 'center' /* 在交叉轴上居中 */,
              justifyContent: 'center' /* 在主轴上居中 */,
            }}
          >
            <p
              onClick={() => handleTabClick(1)}
              className={activeTab === 1 ? 'navItemA' : 'navItem'}
            >
              任务编排
            </p>
          </div>
          <div
            style={{
              marginLeft: '160px',
            }}
          >
            <Space>
              <Button type="primary" ghost onClick={handleCallChildMethod}>
                保存
              </Button>
              <Button type="primary" ghost onClick={() => setCurrentContent && setCurrentContent("list")}>
                返回
              </Button>
            </Space>
          </div>
        </Header>
        <Content style={{}}>
          <div
            style={{
              minHeight: '660px',
              height: '100%',
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {activeTab === 1 ? <AiWorkflow ref={aiWorkflowRef} /> : <BaseInfo ref={baseInfoRef} />}
          </div>
        </Content>
      </Layout>
    </div>
  );
};
